﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorator="partial/layoutAdmin">

<head>
<title>背景音乐管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<div layout:fragment="content">
		<div class="app-container calendar-list-container">
			<div class="filter-container">
				<el-input @keyup.enter.native="handleFilter" style="width: 200px;"
					class="filter-item" placeholder="请输入标题"
					v-model="listQuery.title"> </el-input>
				<el-select @change='handleFilter' style="width: 140px"
					class="filter-item" v-model="listQuery.sort"> <el-option
					v-for="item in sortOptions" :key="item.key" :label="item.name"
					:value="item.value"> </el-option> </el-select>
				<el-button class="filter-item" type="primary" 
					icon="el-icon-search" @click="handleFilter">搜索</el-button>
					 <el-upload
									  class="filter-item"
									  :headers="headers" multiple
									  action="/qiniu/upload"
									  :show-file-list="false"
									  :on-success="uploadFile"
									  :http-request="myupload"
									  :before-upload="validFileUpload">
									  <el-button   v-loading="loading" type="success"><i class="el-icon-edit"></i>上传</el-button>
					</el-upload>
			</div>

			<el-table height="678" :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%"> 
				<el-table-column align="center" label="编号" width="120"  type="index"></el-table-column>
				<el-table-column min-width="250px" label="歌曲名称"> 
					<template slot-scope="scope"> 
						<span class="link-type">{{scope.row.title}}</span> 	
					</template> 
				</el-table-column> 
				<el-table-column class-name="status-col" label="排序码" width="100"> 
					<template slot-scope="scope"> 
						<span>{{scope.row.sortCode}}</span>
					</template> 
				</el-table-column> 
				<el-table-column class-name="status-col" label="最后更新" width="100"> 
					<template slot-scope="scope"> 
						<span>{{scope.row.updateOn}}</span>
					</template> 
				</el-table-column> 
				<el-table-column align="center" label="操作" width="230" class-name="small-padding fixed-width">
					<template slot-scope="scope"> 
						<el-button type="primary" size="mini" @click="linktoEdit(scope.row.id)">编辑</el-button>
						<el-button  size="mini" type="danger" @click="deleteMusic(scope.row.id)">删除</el-button> 
					</template> 
				</el-table-column> 
			</el-table>

			<div class="pagination-container">
				<el-pagination background @size-change="handleSizeChange" class="txtCenter"
					@current-change="handleCurrentChange"
					:current-page="listQuery.pageIndex" :page-sizes="[10,20,30, 50]"
					:page-size="listQuery.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
	</div>
	<div layout:fragment="jscontent">
		<script type="text/javascript">
		var getList=function(){
			var param=this.listQuery;
            $.ajax({
                data: param,
                type: "POST",
                url: '/getmusiclist',
                success: function (result) {
                    if(result.code==0){
                        app.list = result.data.rows;
                        app.total = result.data.totalCount;
                        app.listLoading = false;
                    }else{
                        app.$message.error(result.msg);
                    }
                },
                error: function (data) {

                }
            });
		}
		var submitMusic=function(status){
			var param=this.submitForm;
			$.ajax({
		        data: JSON.stringify(param),
		        type: "POST",
		        url: '/music/batchsavemusic',
		       // traditional:true, 
		        dataType:"json",
		        contentType:"application/json",
		        success: function (result) {
					if(result.code==0){
						app.$message({
					          message: result.msg,
					          type: 'success'
					        });
					}else{
						app.$message.error(result.msg);
					}
		        },
		        error: function (data) {
		        	
		        }
		    });
			
		}
	 var app = new Vue({
         el: '#app',
         data:{
        	 loading:false,
   	      tableKey: 0,
   	      list: null,
   	      total: null,
   	      listLoading: true,
   	      dialogFormVisible: false,
   	      musicList:[],
   	     submitForm:[],
   	      listQuery: {
   	        pageIndex: 1,
   	        pageSize: 10,
   	        title: '',
   	        sortCode: '1'
   	      },
   	      headers:{},
   	      sortOptions: [{ name: '最后更新 升序', key: '+updateOn',value:'0' }, { name: '最后更新 降序', key: '-updateOn',value:'1' }]
   	    },
 	  created() {
 	    this.getList();
 	  },
 	 mounted(){
 		 var token = $("meta[name='_csrf']").attr("content");
		 var header = $("meta[name='_csrf_header']").attr("content");
		 var str= '{ "'+header+'": "'+token+'"}'; 
		 this.headers = eval('(' + str + ')');
 	  },
 	 methods: {
 		submitMusic:submitMusic,
 		myupload(param){
 			debugger;
	    	  var form = new FormData();
	    	  // 文件对象
	    	  form.append("file", param.file);
	    	  $.ajax({
			        data: form,
			        type: "POST",
			        url: '/qiniu/upload',
			        processData:false,
			        cache: false,//上传文件无需缓存
                  processData: false,//用于对data参数进行序列化处理 这里必须false
                  contentType: false, //必须
			        success: function (res) {
			        	if(res.success==1){
				    		  for(var i=0;i<res.results.length;i++){
				    			  var f= res.results[i];
				    			  var item={title:f.name,url:f.url}
				    			  app.submitForm.push(item); 
				    			  
				    		  }
				    		  app.submitMusic();
			    			  app.getList();
							}else{
								app.$message.error(res.msg);
							}
			        },
			        error: function (data) {
			        	
			        }
			    });
	    	   
	      },
 			uploadFile(res, file) {
 		    	  debugger;
 		    	  if(res.success==1){
 		    		  for(var i=0;i<res.results.length;i++){
 		    			var f= res.results[i];
 		    			var item={title:f.name,url:f.url}
 		    			  this.submitForm.push(item); 
 		    			this.submitMusic();
 		    			 this.submitForm=[];
 		    			this.getList();
 		    		  }
 					}else{
 						this.$message.error(res.msg);
 					}
 		        },
 		validFileUpload(file){
 		   const issync = true;
	         const isLt5M = file.size / 1024 / 1024 < 5;
	         if (!isLt5M) {
	           this.$message.error('上传文件大小不能超过 5MB!');
	         }
	         return issync&&isLt5M;
 		},
 		getList:getList,
 	    handleFilter() {
 	      this.listQuery.pageIndex = 1
 	      this.getList()
 	    },
 	    handleSizeChange(val) {
 	      this.listQuery.pageSize = val
 	      this.getList()
 	    },
 	    handleCurrentChange(val) {
 	      this.listQuery.pageIndex = val
 	      this.getList()
 	    }, 
 	   deleteMusic(rowId) {
 	    	app.$confirm('确定要[删除]该条记录吗?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
	    	$.ajax({
		        data: {musicId:rowId},
		        type: "POST",
		        url: '/music/deleteMusic',
		        success: function (result) {
					if(result.code==0){
						app.getList();
						app.$message({
				 	        message: result.msg,
				 	        type: 'success'
				 	      })
					}else{
						app.$message.error(result.msg);
					}
		        },
		        error: function (data) {}
		    });
		        }).catch(() => {})
 	    }
 	  }});
	 </script>
	</div>
</body>

</html>